<template>
	<view>
		<view class="content_tabbar">
			<view class="tabbar_bcg">
				<view class="tabbar">
					<view
						class="items"
						:style="{ width: itemWidth }"
						:class="data.active == index ? 'activeitem' : ''"
						v-for="(item, index) in data.tabbarList"
						@click="tabbarChange(item, index)"
					>
						{{ item.name }}
						<view class="x" v-if="data.active == index"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 84rpx"></view>
		<loadstatusVue :status="data.loadStatus">
			<view class="list">
				<view class="items" v-for="(item,index) in data.list" :key="index" @click="$pageGo(`/mypage/more/orderInfo?id=${item.id}`)">
					<view class="item_top flex_jc_sb">
						<view class="t_l flex">
							订单号:{{item.orderNumber}}
							<image @click="$copyFun(item.orderNumber)" src="/static/fz.png" mode=""></image>
						</view>
						<view class="t_r1" v-if="item.orderStatus !='待发货'">{{item.orderStatus}}</view>
						<view class="t_r" v-else>{{item.orderStatus}}</view>
					</view>
					<view class="item_c flex">
						<view class="img">
							<image :src="item.productCover" mode="aspectFill"></image>
						</view>
						<view class="img_r">
							<view class="title">{{item.productName}}</view>
							<view class="">
								<view class="ss">
									<text>{{ item.productSpecs }}</text>
								</view>
								<view class="flex_jc_sb">
									<view class="price">
										实付款：
										<text>{{ item.productPoints }}</text>
										稻穗值
										<span v-if="item.productPrice != 0">
											+
											<text>{{ item.productPrice }}</text>
											{{ item.productPriceType == 1 ? '元' : '快递费' }}
										</span>
									</view>
									<view class="tts">x1</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</loadstatusVue>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, computed } from 'vue';
import { onLoad, onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import loadstatusVue from '@/components/loadstatus/loadstatus.vue';
import { orderList } from '@/api/shop.js';
import { toast, showConfirm } from '@/utils/common.js';
const data = reactive({
	tabbarList: [
		{
			name: '全部',
			orderStatus: ''
		},
		{
			name: '待发货',
			orderStatus: '待发货'
		},
		{
			name: '已发货',
			orderStatus: '已发货'
		},
		{
			name: '已收货',
			orderStatus: '已收货'
		}
	],
	active: 0,
	list: [],
	loadStatus: 'before', // 加载状态
	hasMore: true, // 是否有更多数据
	isLoading: false, // 防止重复请求的锁
	queryParams: {
		orderStatus: '',
		pageNum: 1,
		pageSize: 10
	}
});
const itemWidth = computed(() => {
	return `${100 / data.tabbarList.length}%`;
});
const tabbarChange = (item, e) => {
	data.active = e;
	data.queryParams.orderStatus = item.orderStatus;
	data.queryParams.pageNum = 1; // 重置页码
	getList(); // 重新加载
};
// 延迟函数
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
// 设置加载状态的方法
const setLoadStatus = (status, options = {}) => {
	data.loadStatus = status;
};
// 处理响应数据的通用方法
const handleResponseData = async (res, isLoadMore = false) => {
	// 如果是加载更多，确保loading状态至少显示500ms，避免闪烁
	if (isLoadMore) {
		await delay(500);
	}
	if (res.code == 200) {
		// 处理数据
		if (isLoadMore) {
			data.list.push(...res.rows);
		} else {
			data.list = res.rows || [];
		}
		// 判断是否有更多数据
		data.hasMore = res.rows && res.rows.length >= data.queryParams.pageSize;
		// 设置状态
		if (data.list.length === 0) {
			setLoadStatus('empty');
		} else if (!data.hasMore) {
			setLoadStatus('noMore');
		} else {
			setLoadStatus('success');
		}
		return true;
	}
	return false;
};
// 获取列表数据
const getList = async (isLoadMore = false) => {
	// 防止重复请求
	if (data.isLoading) return;
	try {
		data.isLoading = true;
		if (isLoadMore) {
			if (!data.hasMore) return;
			setLoadStatus('loading');
		} else {
			setLoadStatus('before');
			// 初始加载时显示loading至少1秒，避免闪烁
			await delay(300);
		}
		const res = await orderList(data.queryParams);
		const success = await handleResponseData(res, isLoadMore);
		if (!success) {
			// 请求失败的处理
			setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
		}
	} catch (err) {
		await delay(300);
		setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
	} finally {
		data.isLoading = false;
	}
};
onReachBottom(() => {
	if (data.hasMore && (data.loadStatus === 'success' || data.loadStatus === 'noMore') && !data.isLoading) {
		data.queryParams.pageNum++;
		getList(true);
	}
});
onLoad(() => {
	getList();
});
</script>
<style lang="scss">
page {
	background: #f7f8f6;
}
.content_tabbar {
	width: 750rpx;
	.tabbar_bcg {
		width: 100%;
		height: 84rpx;
		background: #ece6d5;
		position: fixed;
		z-index: 9;
		top: 0%;
	}
	.tabbar {
		width: 100%;
		display: flex;
		justify-content: space-around;
		height: 80rpx;
		line-height: 80rpx;
		.items {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #717171;
			// border-bottom: 4rpx solid #f3f0e8;
			transition: all 0.4s ease;
			text-align: center;
		}
		.x {
			width: 45rpx;
			height: 4rpx;
			background: #75613e;
			margin: 0 auto;
			transition: all 0.3s ease;
			border-radius: 2rpx;
			animation: expandFromCenter 0.4s ease-out forwards;
		}
		.activeitem {
			font-weight: bold;
			color: #75613e;
			border-bottom: none;
		}
	}
}
@keyframes expandFromCenter {
	0% {
		transform: scaleX(0);
		opacity: 0;
	}
	100% {
		transform: scaleX(1);
		opacity: 1;
	}
}
.list {
	.items {
		width: 710rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
		.item_top {
			.t_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #979797;
				image {
					width: 24rpx;
					height: 24rpx;
					margin-left: 10rpx;
				}
			}
			.t_r {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #75613e;
			}
			.t_r1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #979797;
			}
		}
		.item_c {
			margin-top: 20rpx;
			.img {
				width: 140rpx;
				height: 140rpx;
				background: #ffffff;
				border-radius: 12rpx;
				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 12rpx;
				}
			}
			.img_r {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 140rpx;
				margin-left: 20rpx;
				flex: 1;
				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #1b1b1b;
				}
				.price {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #979797;
					text {
						color: #892b1b;
					}
				}
				.ss{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #1b1b1b;
					margin-bottom: 10rpx;
				}
			}
			.tts {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #1b1b1b;
			}
		}
	}
}
</style>
